<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head lang="zh">
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no"/>
    <!-- <link rel="shortcut icon" href="{HOME_THEME_PATH}images/base/title.png"> -->
    <meta name="applicable-device" content="pc,mobile"/>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/iscroll.js"></script>
    <script src="${pageContext.request.contextPath}/js/swiper.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/fastclick.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/base.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bag.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/swiper.min.css"><!--
    <link rel="stylesheet" href="css/imageflow.css"> -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/animate.min.css">
    <script src='${pageContext.request.contextPath}/js/numberAnimate.js'></script><!--
    <script src='js/imageflow.js'></script> -->
    <script src="${pageContext.request.contextPath}/js/base.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    <script>
        var Gtype = 0;
        var Gciph = "";
        var signPackage= "";
        setTimeout( "calldiaoyong()", 500*1 );
        function calldiaoyong(){
            var spanObj = document.getElementById("signPackage");
            if( spanObj == null ){
                setTimeout("calldiaoyong()",500*1);
                return;
            }
            signPackage = document.getElementById("signPackage").innerText;
//            calldiaoyong2();
        }

        function calldiaoyong2(){
            var userid = document.getElementById("userId").innerText;
            var userName = document.getElementById("username").innerText;
            var token = document.getElementById("token").innerText;
            var ciph = document.getElementById("hiddenciphertext").value;
            var type = document.getElementById("typehero").value;
            var obj =JSON.parse(signPackage);
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'wxa425be4d44210149', // 必填，公众号的唯一标识
                timestamp: obj.timestamp, // 必填，生成签名的时间戳
                nonceStr: obj.noncestr, // 必填，生成签名的随机串
                signature: obj.signature,// 必填，签名，见附录1
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage'
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });

            wx.ready(function () {
                wx.onMenuShareTimeline({
                    title: userName+'赠送你一张英雄卡', // 分享标题
                    link: 'http://gok.tc2stgs.com/trade/knapsackadd?type='+document.getElementById("typehero").value+'&idfrom='+userid+'&ciphP='+document.getElementById("hiddenciphertext").value, // 分享链接,将当前登录用户转为puid,以便于发展下线
                    imgUrl: 'http://gok.tc2stgs.com/images/game_logoshare.jpg', // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        shareCallback(document.getElementById("typehero").value);
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
//                        alert('取消分享');
                    }
                });
                wx.onMenuShareAppMessage({
                     title: userName+'赠送你一张英雄卡', // 好友分享标题
                    desc: '风靡全国的王者荣耀在线竞猜火爆登场，你目前20位好友与你并肩作战！', // 分享描述
                    link: 'http://gok.tc2stgs.com/trade/knapsackadd?type='+document.getElementById("typehero").value+'&idfrom='+userid+'&ciphP='+document.getElementById("hiddenciphertext").value, // 分享链接,将当前登录用户转为puid,以便于发展下线
                    imgUrl: 'http://gok.tc2stgs.com/images/game_logoshare.jpg', // 分享图标
                    type: '', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {
// 用户确认分享后执行的回调函数
//                        alert('http://gok.tc2stgs.com/trade/knapsackadd?type='+document.getElementById("typehero").value+'&idfrom='+userid+'&ciphP='+document.getElementById("hiddenciphertext").value);
                        shareCallback(document.getElementById("typehero").value);
                    },
                    cancel: function () {
// 用户取消分享后执行的回调函数
                    }
                });


                wx.error(function(res){
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                    // alert("errorMSG:"+res);
                });
            });
        }


        function shareCallback(type){
            $.ajax({
                url:'/trade/knapsackdelete',
                type:'get',
                data:{'type':type},
                success:function(data){
                    console.log(data);
                    if(data.status == 1){
                        //刷新英雄卡的显示
                        window.location.href=window.location.href+"?"+Math.random();
                    }else{
                        errorMsg(data.message)
                    }
                },
                error: function(e){
                    errorMsg('网络错误,请稍后再试');
                }
            })
        }

    </script>



    <script type="text/javascript">
        var bagContentiScroll = '';
        function page_onload(){
            //initPage();
            AjaxBag();
            bagContentiScroll = new IScroll('.page_body',{
                mouseWheel:true,
                scrollbars:false,
                bounce:false,
                click:iScrollClick()
            });
        $('.pop_conform').on('click',function(){
            $('.shop_popups').hide();
            window.location.href = "game.jsp"
        })
        }

    function AjaxBag(){//获取结果接口
        var bodyview = $('.bag_body .person>ul');
        bodyview.html('');
        $.ajax({
            url:"/trade/knapsackdisplay",
            type:'GET',
            success: function(data){
                var isGetAll = data.indexOf(0) < 0;
                var minNum = eval("Math.min(" + data.split(',').toString() + ")");
                var html_ul = '';
                //alert(isGetAll);
                //isGetAll = 1;
                if(isGetAll){
                    for(var i = 0; i < minNum ; i++){
                        html_ul += "<li class='selected'>";
                        html_ul += "<img src='/images/mine-person-bg1.png' class='four-angle'>";
                        html_ul += "<div class='person-top'>";
                        html_ul += "<img src='/images/mine-person_12.png'>";
                        html_ul += "</div>";
                        html_ul += "<div class='person-top1'>";
                        html_ul += "<img src='/images/mine-person-bg2.png'>";
                        html_ul += "<div class='line'></div>";
                        html_ul += "<div class='collect-all'>已集齐</div>";
                        html_ul += "<div class='hero'>";
                        html_ul += "<div class='hero-main'>";
                        html_ul += "<img src='/images/mine-person-hero.png'>";
                        html_ul += "</div>";
                        html_ul += "</div>";
                        html_ul += "<a href='javascript:;' class='click-all'>";
                        html_ul += "<div class='click' style='line-height:22px;'>点击兑换</div>";
                        html_ul += "</a>";
                        html_ul += "</div>";
                        html_ul += "</li>";
                    }

                }
                data = data.split(',');
                console.log(data);
                for(var i = 0;i<data.length;i++){
                    if( data[i] - minNum == 0 ){
                        html_ul += '<li>';
                    }else{
                        html_ul += '<li class="on" data-id = "'+heroOptionArray[i][0]+'">';
                    }
                    html_ul += '<img src="/images/mine-person-bg1.png" class="four-angle">';
                    html_ul += '<div class="person-top">';
                    html_ul += '<img src="/images/mine-person_0'+(i+1)+'.png">';
                    if(data[i] - minNum <=1){
                        html_ul += '<div class="name-bg">'+heroOptionArray[i][1]+'</div>';
                    }else{
                        html_ul += '<div class="name-bg">'+heroOptionArray[i][1]+'<a style="color:white;">x'+( data[i] - minNum )+'</a></div>';
                        // html_ul += '<span class="bag">赠送</span>';
                    }
                    html_ul += '<div class="line"></div>';
                    html_ul += '</div>';
                    html_ul += '<div class="person-top1">';
                    html_ul += '<img src="/images/mine-person-bg2.png">';
                    html_ul += '</div>';
                    html_ul += '<div class="shade">';
                    html_ul += '<div class="shade-title">';
                    html_ul += '<div class="lock-main">';
                    html_ul += '<img src="/images/mine-person-lock.png">';
                    html_ul += '</div>';
                    html_ul += '<p>'+heroOptionArray[i][1]+'</p>';

                    html_ul += '</div>';
                    html_ul += '</div>';
                    html_ul += '</li>';
                }
                bodyview.html(html_ul);
                setTimeout(function(){
                    bagContentiScroll.refresh();
                },200)
            },
            error: function(e){
                errorMsg('网络错误,请稍后再试');
            }
        });
        $('.person').on('click','.click',function(){
               $.ajax({
                    url:'/integral/KnapsackHeroOpen',
                    type:'get',
                    success:function(data){
                        console.log(data);
                        if(data.status == 1){
                            $('.shop_popups').show();
                            $(".selected").remove();

                        }else{
                            errorMsg(data.message)
                            }
                        },
                    error: function(e){
                        errorMsg('网络错误,请稍后再试');
                    }
                })

            })
        $('.person').on('click','li',function(){
            var id = $(this).data('id');
            console.log(id);
           $.ajax({
                url:'/trade/knapsackEncry?',
                type:'get',
                data:{'type':id},
                success:function(data){
                    if(data.status == 1){
                        $('.bag_hiddle').val(data.message)
                        $('#typehero').val(id)
                        Gtype = id;
                        Gciph = data.message;
                        calldiaoyong2();
                        $('#maskIn1').show()
                    }else{
                        errorMsg('你的英雄卡不足')
                    }

                    },
                error: function(e){
                    errorMsg('网络错误,请稍后再试');
                }
            })

        })
        $(window).on('click',function(){
            $('#maskIn1').hide();
        })


    }
    </script>
</head>
    <body onselectstart="return false;" oncontextmenu="self.event.returnValue=false;">
    <span style="display: none;" id="signPackage">${signPackage}</span>
    <span style="display: none" id="username">${nickname}</span>
    <span style="display: none" id="userId">${userid}</span>
    <span style="display: none" id="token">${token}</span>
    <input type="hidden" name="hiddenciphertext" id="hiddenciphertext" class="bag_hiddle">
    <input type="hidden" name="typehero" id="typehero" value="">
    <div class='page_box'>
      <div class="shop_popups">
                <div class="shop_popups_once">
                        <p>英雄卡兑换</p>

                        <p>恭喜兑换成功！获得<span style="color:#f1de84">1880金币</span>!</p>
                     <div>
                            <a class="pop_conform">确定</a>
                    </div>
                </div>
      </div>
    <div id="maskIn1">

            <i class="mask_hand animated bounce" style="animation-iteration-count:infinite;animation-duration: 2s;"></i>
        <div class="mask_p">
            <p  class="animated tada"  style="animation-iteration-count:infinite;animation-duration: 2s;">点击右上角分享给你的好友</p>
        </div>
    </div>
        <div class='page_bg'>
            <img src="${pageContext.request.contextPath}/images/vip_bg.jpg"/>
        </div>
        <div class='page_body'>
            <div class='page_content'>
                <div class='bag_body'>

                    <!----------BAG START------------>
                    <div class="person">
                            <ul>
                            </ul>
                    </div>
                    <!----------BAG END------------>
                </div>
            </div>
        </div>
    </div>
    </body>

</html>